{% extends 'base.html' %}
{% block title %}
    <title>笔记详情</title>
    <style>
        .active {
            color: red;
        }

        #like {
            cursor: pointer;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container" style="padding: 80px 0">
        <div class="col-md-9">
            <h2 class="text-center">{{ note.title }}</h2>
            <br>
            <div class="info">
                <span>作者：</span>
                <strong>{{ note.user }}</strong>
                <span>发表时间：</span>
                <strong>{{ note.pub_date }}</strong> &nbsp;&nbsp;
                <span class="label label-success">{{ note.type }}</span>
                <p class="pull-right">
                    <span id="like">
                         <span class="glyphicon glyphicon-heart-empty"></span>
                        <strong>{{ note.like_num }}</strong>&nbsp;&nbsp;
                    </span>

                    <span class="glyphicon glyphicon-eye-open"></span>
                    <strong>{{ note.read_num }}</strong>
                </p>
            </div>
            <br>
            <hr>
            {{ note.content|safe }}
            <div class="comment">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            欢迎评论:
                        </h3>
                        <a href="" class="col-md-offset-10" data-toggle="modal" data-target="#myModal">我要评论</a>
                    </div>
                    <div class="panel-body">
                        {# 评论部分 #}
                        {% for comment,replys in comments %}
                            <p>
                                <img class="img-circle" src="/media/{{ comment.user.head_img }}" alt=""
                                     style="width: 25px;height: 25px">
                                &nbsp; &nbsp;{{ comment.user }}
                            </p>
                            <div class="well">
                                {{ comment.body |safe }}<br><br>
                                <p>
                                    {{ comment.pub_date }}
                                    <a href="" class="pull-right" data-toggle="modal" data-target="#myModal1">回复</a>
                                <ul style="list-style: none">
                                    {% for reply in replys %}
                                        <li>
                                            <p>
                                                <img class="img-circle" src="/media/{{ reply.user.head_img }}" alt=""
                                                     style="width: 25px;height: 25px">
                                                &nbsp; &nbsp;{{ reply.user }}
                                            </p>
                                            <p style="padding-left: 20px">
                                                {{ reply.body|safe }}
                                            </p>
                                            <p style="padding-left: 20px">
                                                {{ reply.pub_date }}
                                                <a href="" class="pull-right" data-toggle="modal"
                                                   data-target="#myModal1">回复</a>
                                            </p>

                                        </li>
                                    {% endfor %}

                                </ul>
                                </p>
                            </div>
                            <!-- 回复的模态框（Modal） -->
                            <form action="{% url 'note_detail' note.id %}" method="post" onsubmit="return">
                                {% csrf_token %}
                                <div class="modal fade" id="myModal1" tabindex="-1" role="dialog"
                                     aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"
                                                        aria-hidden="true">×
                                                </button>
                                                <h4 class="modal-title" id="myModalLabel">添加回复：</h4>
                                            </div>
                                            <div class="modal-body">
                                                {% if user.is_authenticated %}
                                                    <div class="form-group">
                                                        <textarea id="editor" class="form-control" rows="3"
                                                                  name="reply_body"></textarea>
                                                        <script>
                                                            CKEDITOR.replace('editor')
                                                        </script>
                                                        <input type="hidden" value="{{ comment.id }}" name="cid">
                                                    </div>
                                                {% else %}
                                                    <h4>请先登录，然后评论</h4>
                                                    <a href="{% url 'login' %}">登录</a>
                                                {% endif %}
                                            </div>
                                            <div class="modal-footer">
                                                <button type="submit" class="btn btn-primary">确定</button>
                                                <button type="button" class="btn btn-info" data-dismiss="modal">关闭
                                                </button>
                                            </div>
                                        </div><!-- /.modal-content -->
                                    </div><!-- /.modal-dialog -->
                                </div>
                                <!-- /.modal -->
                            </form>
                        {% endfor %}

                    </div>
                </div>
            </div>
        </div>
        <!-- 评论的模态框（Modal） -->
        <form action="{% url 'note_detail' note.id %}" method="post" onsubmit="return">
            {% csrf_token %}
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="myModalLabel">添加评论：</h4>
                        </div>
                        <div class="modal-body">
                            {% if user.is_authenticated %}
                                <div class="form-group">
                                    <textarea id="editor1" class="form-control" rows="3" name="body"></textarea>
                                    <script>
                                        CKEDITOR.replace('editor1')
                                    </script>
                                </div>
                            {% else %}
                                <h4>请先登录，然后评论</h4>
                                <a href="{% url 'login' %}">登录</a>
                            {% endif %}
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">确定</button>
                            <button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->
        </form>
        <div class="col-md-3 hidden-sm hidden-xs">
            <div style="margin-bottom: 15px">
                <a href="#" class="list-group-item active " style="text-align: center">
                    {{ note.user }} 的其他文章
                </a>
                {% for user_note in all_notes %}
                    <a href="{% url 'note_detail' user_note.id %}" class="list-group-item">
                        {% if user_note.title|length > 12 %}
                            {{ user_note.title |truncatechars:12 }}...
                        {% else %}
                            {{ user_note.title }}
                        {% endif %}
                        <p class="pull-right" style="font-size: 8px">
                            <span class="glyphicon glyphicon-eye-open"></span>
                            <strong>{{ user_note.read_num }}</strong>
                        </p>
                    </a>
                {% endfor %}


            </div>
        </div>
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        {# 是否想点赞 #}
        let flag = false
        $('#like').click(function () {
            if (!{{ user.is_authenticated |lower }}) {
                window.location.href = "/user/login?next=/note/note_detail/{{note.id}}"
            }
            {#  想要点赞的请求 #}
            if (flag === false) {
                $.get(
                    '{% url 'update_like' %}',
                    {'note_id':{{note.id}}, 'flag': ''},
                    function (data) {
                        console.log(data)
                        {# 先把like——num 放到srong ，再给他加一个类#}
                        $('#like>strong').html(data['like_num'])
                        $('#like').addClass('active')
                        {# 把标志设置为true，说明他点过赞了 #}
                        flag = true
                    }
                )
            } else {
                {#  想要取消点赞的请求 #}
                $.get(
                    '{% url 'update_like' %}',
                    {'note_id':{{note.id}}, 'flag': '1'},
                    function (data) {
                        console.log(data)
                        {# 先把like——num 放到srong ，再给他加一个类#}
                        $('#like>strong').html(data['like_num'])
                        $('#like').removeClass('active')
                        {# 把标志设置为true，说明他点过赞了 #}
                        flag = false
                    }
                )
            }

        })

    </script>
{% endblock %}